<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSX</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <style>
    .container {
      width: 1000px;
      margin: 50px auto;
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    //数据
    let data = {
      title: '中纪委网站深度关注：“吴亦凡事件”暴露出的“饭圈”乱象，非整治不可',
      content: '累计清理负面有害信息15万余条，处置违规账号4000余个，关闭问题群组1300余个，解散不良话题814个，拦截下架涉嫌集资引流的小程序39款，专项排查整治网络综艺节目……日前，中央网信办、国家广播电视总局等相关主管部门整治不良粉丝文化工作的阶段性成效公布，引发社会广泛关注',
      image: 'https://img2.utuku.imgcdc.com/650x0/ent/20210829/2f23657a-bee9-4009-a2e1-ef092d831870.png'
    };

    //创建虚拟DOM对象  标识符的要求   插值表达式
    let vdom = (<div>
      <div className="container">
        <h2 style={{ color: '#f34', fontSize: '28px' }}>{data.title}</h2>
        <p>{data.content}</p>
        <img src={data.image} alt="" />
      </div>
      <div className="container">
        <h2 style={{ color: '#f34', fontSize: '28px' }}>{data.title}</h2>
        <p>{data.content}</p>
        <img src={data.image} alt="" />
      </div>
    </div>);

    //渲染
    ReactDOM.render(vdom, document.querySelector('#root'));

    //JSX 注意点
    //1. 不能用引号包裹, 可以用『小括号』包裹
    //2. JSX 与『JS表达式』拼接时, 需要用到 {}
    //3. JSX 中设置 class 属性, 必须使用 className
    //4. JSX 中设置 style 属性, 必须要使用 {{color: 'red'}} 形式来设置
    //5. 必须要有根标签
    //6. 对于自闭和标签  img  input 注意,也必须要闭合  <img></img>  <img /> 两种写法都可以
    //7. 关于标签名
        // 小写字母开头, 到 HTML 中找对应的同名标签, 如果找到就正常创建, 如果找不到, 就报错
        // 大写字母开头, 到 React 中寻找对应的组件, 如果找到, 就正常创建, 如果找不到, 就报错
        // > 如果编写的是 HTML 标签, 标签名首字母『一定要小写』, 如果编写的是组件标签, 标签名首字母『一定要大写』
  </script>
</body>

</html>